<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height: 300px;
            border-style: double;
            border: 10px red double;
            background-image:url("https://tse1-mm.cn.bing.net/th/id/R-C.d2e3c45dcab6fe72987abcefffdd4727?rik=oewzy6OEMyxJaw&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2f1212qxn%2f776.jpg&ehk=Z%2bbp29Kul%2b8nkehJgAyF86SsdwXGR814hySzE%2fcQhjU%3d&risl=&pid=ImgRaw&r=0");
            background-clip:content-box;
            /*background-clip用于设置背景图片的范围*/
/*border-box(默认值)；背景会出现在边框上*/
/*padding-box；背景会出现在内边距和内容区*/
/*content-box；背景只会出现在内容区*/
            background-origin:border-box;
            /*background-origin用于设置偏移量的圆点*/
/*padding-box(默认值)：使background-position的值从内边距开始计算*/
/*border-box(默认值)：使background-position的值从边框开始计算*/
/*content-box(默认值)：使background-position的值从内容区开始计算*/
            /* background-size:100px 100px; */
            /*background-size用于设置背景图片大小*/
            /*
第一个值代表宽度
第二个值代表高度
*/
            background-repeat: no-repeat;
            /* background-size: contain; */
/*图片比例不变，显示整个元素*/
            background-size: cover;
/*图片比例不变，铺满整个元素*/

            }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>